<template>
  <div class="manager-detail__tongji">
    <div class="jydw-title">系统授权查询</div>
    <tx-block>
      <div>
        <el-form label-width="110px" class="demo-ruleForm" :inline="true">
          <el-form-item label="行政区划">
            <el-cascader
              :props="areaOptions"
              v-model="table.query.areaCode"
              clearable
              :show-all-levels="false"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="业务系统">
            <el-select
              v-model="table.query.businessId"
              placeholder="请选择业务系统"
              clearable
            >
              <el-option
                v-for="item in businessList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="成员单位">
            <el-input
              v-model="table.query.deptName"
              placeholder="请输入成员单位"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="内设机构">
            <el-input
              v-model="table.query.orgName"
              placeholder="请输入内设机构"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input
              v-model="table.query.userName"
              placeholder="请输入姓名"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleQuery()">查询</el-button>
            <el-button @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <tx-list-table
        :table="table"
        ref="listTable"
        row-key="name"
        v-loading="table.loading"
        :table-row-style="tableRowStyle"
      >
        <tx-table-column-text label="序号" width="47">
          <template slot-scope="scope">
            <span class="number-index">{{ scope.scope.scope.$index + 1 }}</span>
          </template>
        </tx-table-column-text>
        <tx-table-column-text label="业务系统">
          <template slot-scope="scope">
            {{ scope.row.parentBusinessName +"-"+scope.row.businessName}}
          </template>
        </tx-table-column-text>
        <tx-table-column-text
          label="行政区划"
          prop="areaName"
        ></tx-table-column-text>
        <tx-table-column-text
          label="成员单位"
          prop="deptName"
        ></tx-table-column-text>
        <tx-table-column-text
          label="内设机构"
          prop="orgName"
        ></tx-table-column-text>
        <tx-table-column-text
          label="姓名"
          prop="userName"
        ></tx-table-column-text>
        <tx-table-column-text
          label="手机号"
          prop="phone"
        ></tx-table-column-text>
        <tx-table-column-text
          label="权限"
          prop="authName"
        ></tx-table-column-text>
        <tx-table-column-text
          label="授权时间"
          prop="createdTime"
        ><template slot-scope="scope">
       {{ $moment(scope.row.createdTime).format("YYYY-MM-DD") }}</template>
      </tx-table-column-text>
        <tx-table-column-text
          label="授权人"
          prop="authUserName"
        ></tx-table-column-text>

        <!-- <tx-table-column-text label="管理员名称">
          <template slot-scope="scope">{{ scope.row.name }} </template>
        </tx-table-column-text>
        <tx-table-column-text label="管理员电话">
          <template slot-scope="scope"> {{ scope.row.phone }}</template>
        </tx-table-column-text>
        <tx-table-column-text label="避难场所场所地址" prop="address">
        </tx-table-column-text>
        <tx-table-column-action width="180" align="left">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              class="table-edit-btn"
              @click="handlDetail(scope)"
              >详情
            </el-button>
          </template>
        </tx-table-column-action> -->
      </tx-list-table>
      <tx-list-page :table="table" @change="changeSize"></tx-list-page>
    </tx-block>
  </div>
</template>

<script>
import { getList } from "@/api/systemManage/dictionary";

// import DetailEvent from "./DetailEvent.js";
// import PartsModifyMixin from "./mixins/PartsModifyMixin.js";

// import dbl from "@/utils/dbl";
import moment from "moment";
export default {
  mixins: [],
  props: {
    userInfo: {
      type: Object,
      default() {
        return {
          phone: "",
        };
      },
    },
  },
  data() {
    return {
      tableData: [],
      businessList: [],
      areaOptions: {
        lazy: true,
        checkStrictly: true,
        lazyLoad: (node, resolve) => {
          //    this.handleQuery()
          setTimeout(() => {
            if (node.level == 0) {
              const cities = [
                {
                  value: 150000000000,
                  label: "内蒙古自治区",
                  // leaf: node.level >= 2,
                },
              ];
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(cities);
            }
            if (node.level != 0) {
              let payload = { body: { parId: node.value } };
              this.$api.CommonController.list(payload)
                .then((res) => {
                  const areas = res.data.map((value, i) => ({
                    value: value.id,
                    label: value.name,
                    // leaf: node.level >= 2,
                  }));
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(areas);
                })
                .catch((err) => {
                  console.log(err);
                });
            }
          }, 1000);
        },
      }, //行政区划
      table: {
        loading: false,
        query: {
          businessId: "",
          areaCode: [],
          deptName: "",
          orgName: "",
          userName: "",
        },
        sort: {
          descs: ["updateTime"],
        },
        page: this.$yzvue.initPage(),
      },
    };
  },
  components: {},
  created() {
    this.$api.BaController.allBusiness({}, (res) => {
      this.table.loading = false;
      if (res.code == 0) {
        this.businessList = res.data;
      }
    });
    this.handleQuery();
  },
  computed: {
    isManage() {
      return function (val) {
        return val && val == this.userInfo.phone;
      };
    },
  },
  mounted() {
    // !this.userInfo.phone && this.loadTable();
    // this.getOrgType(this.getParameter("menuId"), "typelist1");
  },
  watch: {
    "table.query.orgType1": function () {
      // 监听一级菜单触发二级菜单查询
      this.typelist2 = [];
      this.table.query.orgType2 = "";
      this.getOrgType(this.table.query.orgType1, "typelist2");
    },
    "userInfo.phone": {
      handler(val) {
        this.userInfo.phone = val;
        this.loadTable();
      },
    },
  },
  methods: {
    reset() {
      this.table.query = {
        businessId: "",
        areaCode: [],
        deptName: "",
        orgName: "",
        userName: "",
      };
      this.handleQuery();
    },
    handleQuery() {
      this.loadTable();
    },
    loadTable() {
      this.table.loading = true;
      let data = {
        body: {
          size: this.table.page.size,
          current: this.table.page.current,
          businessId: this.table.query.businessId,
          areaCode:
            this.table.query.areaCode[this.table.query.areaCode.length - 1],
          deptName: this.table.query.deptName,
          orgName: this.table.query.orgName,
          userName: this.table.query.userName,
        },
      };
      this.$api.BaController.log(data, (res) => {
        this.table.loading = false;
        if (res.code == 0) {
          this.$yzvue.assembleBody(this.table.page, {
            ...res?.data,
          });
        }
      });
    },
    changeSize() {
      this.handleQuery();
    },
    getOrgType(parId, typelist) {
      if (!parId) {
        return false;
      }
      // 获取类型列表
      let data = {
        body: {
          parId,
        },
      };
      this.$api.OrgController.type(data, (res) => {
        if (res.code == 0) {
          this[typelist] = res?.data;
        }
      });
    },
    changeOrgType(val) {
      this.table.query.orgType1 = val;
    },
    handlDetail(scope) {
      let row = scope.row;
      this.$router.push(`/maintenanceInformation?depId=${row.dep_id}`);
    },
    tableRowStyle({ row, rowIndex }) {
      if (row?.state == 2) {
        return {
          background: "rgba(254,179,76,0.1)",
          "box-shadow": "inset 0px 0px 10px 0px #FEB34C",
          color: "#FEB34C",
        };
      }
      return "";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/variables.scss";

.manager-detail__tongji .tx-detail {
  padding: 0px 0px;
  justify-content: left;
  .tx-list-query,
  .tx-list-table {
    padding: 15px 25px;
  }
}
.manager-detail__tongji {
  border: 1px solid rgba(61, 126, 165, 0.5);
  background: linear-gradient(0deg, #0b3e66 0%, #1c5280 100%);
  .el-form-item__content .el-select {
    width: auto !important;
  }
}
.jydw-title {
  font-size: 18px;
  background: url(../../../assets/tongji/title.png) left no-repeat;
  background-size: 24px 24px;
  text-indent: 25px;
  color: #4af6fc;
  margin-left: 30px;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 0px 0;
}
.tj-box {
  display: flex;
  padding: 0 15px 10px;
  flex-wrap: wrap;
  li {
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    width: 20%;
    position: relative;
    margin-bottom: 10px;
    .box {
      margin: 0 5px;
      background: linear-gradient(0deg, #4486d7 0%, #2a5982 100%);
      border: 1px solid #2b5c7c;
      display: flex !important;
      align-content: center;
      align-items: center;
      padding: 5px 20px 20px !important;
      padding: 5px 20px 20px !important;
      box-shadow: inset 0px 0px 5px 0px #a3d6da;
    }
    &.active .box {
      background: linear-gradient(0deg, #b6d6d5 0%, #4380c3 100%);
      box-shadow: inset 0px 0px 5px 0px #ebf5fc;
      .name {
        color: #00cfff;
      }
    }
    img {
      width: 60px;
      height: 60px;
    }
    .name {
      width: 100px;
      margin-left: 10px;
      margin-top: -20px;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .num {
      // flex: 1;
      text-align: right;
      font-family: "PingFangSC-Semibold, PingFang SC;";
      font-weight: bold;
      color: #00cfff;
      line-height: 32px;
      margin-top: -20px;
      // background: linear-gradient(180deg, #cdfff9 0%, #4bffeb 100%);
      //   -webkit-background-clip: text;
      // -webkit-text-fill-color: transparent;
      span {
        font-size: 20px;
      }
      em {
        font-size: 16px;
        margin-left: 2px;
      }
    }
    .ws {
      position: absolute;
      display: block;
      margin-left: 70px;
      margin-top: 40px;
      color: #cbe7ff;
    }
  }
}
</style>
